<template>
    <div class="form-div" v-show="showForm" ref="forms">
        <div class="mask"></div>
        <div class="form">
            <div class="close" @click="showForm=false">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shanchu"></use>
                </svg>
            </div>
            <ul class="f-list">
                <li>
                    <div class="label">手&nbsp;&nbsp;机&nbsp;&nbsp;&nbsp;&nbsp;号:</div>
                    <div class="input">
                        <input v-model="form.phone" type="text" placeholder="输入您的手机号">
                    </div>
                </li>
                <li>
                    <div class="label">图形验证码:</div>
                    <div class="input">
                        <input v-model="form.captcha" type="text" placeholder="输入右边验证码">
                    </div>
                    <div class="code-img" @click="generCaptcha">
                        <img :src="'data:image/jpeg;base64,'+codeImg" alt="">
                    </div>
                </li>
                <li>
                    <div class="label">短信验证码:</div>
                    <div class="input">
                        <input v-model="form.code" type="text" placeholder="输入短信验证码">
                    </div>
                    <div class="code-phone" @click="sendSms" v-if="!showDao">
                        <span>获取验证码</span>
                    </div>
                    <div class="code-phone" v-else>
                        <span>{{'('+daojishi+')秒'}}</span>
                    </div>
                </li>
                <li>
                    <div class="label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</div>
                    <div class="input">
                        <input v-model="form.name" type="text" placeholder="输入您的名字">
                    </div>
                </li>
                <li>
                    <div class="label">校&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区:</div>
                    <div class="input school-input">

                        <div class="input-div grade" @click="showSchool=!showSchool">
                            <span>{{form.schoolName||'校区'}}</span>
                            <img src="../assets/img/down.png" alt="">
                            <ul v-show="showSchool">
                                <div class="li-div">
                                    <li v-for="(item,i) in schools" @click.stop="selectSchool(item)">{{item.name}}
                                    </li>
                                </div>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="school">
                <span v-if="schoolItem.address">{{schoolItem.address}}；联系方式:{{schoolItem.phone}}</span>
            </div>
            <div class="commit" @click="attendActivityGroup">提交</div>
        </div>
    </div>
</template>
<script>
import schools from '../assets/school'
import io from '../lib/io'
export default {
    name: 'v-form',
    data() {
        return {
            form: {
                phone: '',
                token: '',
                captcha: '',
                code: '',//手机验证码
                name: '',
                schoolId: '',
                schoolName: '',
                activityGroupId: ''
            },
            codeImg: '',
            daojishi: 60,
            showDao: false,
            inter: '',
            schools,
            showSchool: false,
            showForm: false,
            schoolItem: {},
            isNew: false,
            commitDisable:false
        }
    },
    watch: {
        showForm(val) {
            if (!val) {
                this.resetForm()
            }else{
                document.body.scrollTop=0
            }
        }
    },
    created() {
        this.generCaptcha()
    },
    destroyed() {
        clearInterval(this.inter)
    },
    methods: {
        resetForm() {
            // this.form.phone=''
            // this.form.token=''
            // this.form.captcha=''
            // this.form.code=''
            // this.form.name=''
            // this.form.schoolId=''
            // this.form.schoolName=''
            this.form.activityGroupId = ''
        },
        async attendActivityGroup() {
            if(this.commitDisable===true){
                return
            }
            this.commitDisable=true
            setTimeout(()=>{
                this.commitDisable=false
            },1000)
            let reg = /^1[3456789]\d{9}$/;
            if (!reg.test(this.form.phone)) {
                alert('请输入正确的手机号码')
                return
            }
            if (!this.form.code||!this.form.code.trim()) {
                alert('请输入手机验证码')
                return
            }
            if (!this.form.name||!this.form.name.trim()) {
                alert('请输入您的姓名')
                return
            }
            if (!this.form.schoolId || !this.form.schoolName) {
                alert('请选择校区')
                return
            }
            let { data } = await io.post(io.attendActivityGroup, this.form)
            if (data.success) {
                console.log(this.isNew)
                this.$router.push({ path: '/result', query: { type: this.isNew ? 'self' : 'other', activityGroupId: data.data.activityGroupId } })
                // if(this.$route.path==='/result'){
                //     this.$router.go(0)
                // }
            }else {
                if (data.data) {
                    this.$router.push({ path: '/result', query: { type:'self', activityGroupId: data.data.activityGroupId } })
                }
            }
        },
        async sendSms() {
            let reg = /^1[3456789]\d{9}$/;
            if (!reg.test(this.form.phone)) {
                alert('请输入正确的手机号码')
                return
            }
            if (!this.form.captcha||!this.form.captcha.trim()) {
                alert('请输入图形验证码')
                return
            }
            let { data } = await io.post(io.canAttActGro, { phone: this.form.phone })
            if (data.success) {
                let { data } = await io.post(io.sendSms, this.form)
                if (data.success) {
                    alert(data.desc)
                    this.showDao = true
                    this.inter = setInterval(() => {
                        if (this.daojishi > 0) {
                            this.daojishi--
                        } else {
                            this.daojishi = 60
                            this.showDao = false
                            clearInterval(this.inter)
                        }
                    }, 1000)
                } else {
                    this.generCaptcha()
                }
            } else {
                if (data.data) {
                    this.$router.push({ path: '/result', query: { type:'self', activityGroupId: data.data.activityGroupId } })
                }
            }
        },
        async generCaptcha() {
            let { data } = await io.post(io.generCaptcha)
            if (data.success) {
                this.codeImg = data.data.img
                this.form.token = data.data.token
            }
        },
        showOrHide(type) {
            this.showForm = !!type
        },
        changeIsNew(type) {
            this.isNew = !!type
        },
        changeId(id) {
            this.form.activityGroupId = id
        },
        selectSchool(item) {
            this.form.schoolName = item.name
            this.form.schoolId = item.id
            this.schoolItem = item
            this.showSchool = false
        },
        // commit() {
        //     this.$router.push({ path: '/result', query: { type: 'self' } })
        // }
    }
}
</script>
<style lang="stylus" scoped>
.form-div
        position absolute
        top 0
        width 100%
        height 100%
        z-index 1
        .mask
            position fixed
            width 100%
            height 100%
            background black
            opacity .4
            z-index 2
        .form
            width 6.8rem
            height 8rem
            background #ffffff
            position absolute
            z-index 3
            top 1rem
            left 50%
            transform translate(-3.4rem,0)
            border-radius .4rem
            padding .7rem .5rem
            box-sizing border-box
            font-size .3rem
            .close
                position absolute
                top -.9rem
                right -.2rem
                z-index 3
                .icon
                    color #ffffff
                    font-size 1rem
            .f-list
                padding 0
                margin 0
                li
                    border-bottom 2px solid #f5f5f5
                    display flex
                    margin-bottom .5rem
                    line-height .3rem
                    align-items flex-end
                    padding-bottom .16rem
                    height .3rem
                    &:last-child
                        margin-bottom 0
                    .label
                        width 1.8rem
                        display flex
                        justify-content flex-end
                    .input 
                        width 2.4rem
                        height .28rem
                        display flex
                        align-items center
                        flex 1
                    input 
                        font-size .3rem
                        width 100%
                        color #C4C4C4
                    .code-img
                        width 1.4rem
                        height .56rem
                        overflow hidden
                        img 
                            height 100%
                            position relative
                            left -1.2rem
                    .code-phone
                        width 1.4rem
                        font-size .24rem
                        line-height .24rem
                        font-weight bold
                        border 2px solid #EBB95A
                        border-radius .06rem
                        display flex
                        justify-content center
                        align-items center
                        height .56rem
                        color #EBB95A
                        position relative
                        top .04rem
    .school
        font-size .24rem
        color #666666
        margin-top .16rem
        .input
            height auto !important
    .commit
        background #F4A418
        height .8rem
        width 4.64rem
        display flex
        justify-content center
        align-items center
        color #ffffff
        margin auto
        margin-top .6rem
        border-radius .1rem
        font-size .36rem
        font-weight bold
        position absolute
        bottom .6rem
        left 1.08rem
.school-input
    width 100% !important
.input-div
    height .38rem
    display flex
    align-items center
    border-radius .05rem
    background white
    padding 0 .15rem
.grade
    position relative
    flex 1
    img 
        height .1rem
        position absolute
        right .1rem
    ul
        position absolute
        bottom -4.5rem
        right 0 
        height 4.23rem
        margin 0
        padding 0
        background white
        width 2.5rem
        border 1px solid #D7D6D6
        border-bottom-left-radius .05rem
        border-bottom-right-radius .05rem
        z-index 111
        &:before
            content ''
            width 0
            height 0
            border-bottom .16rem solid #D7D6D6
            border-right .16rem solid transparent
            border-left .16rem solid transparent
            position absolute
            top -.16rem
            right .2rem
            z-index 1
        &:after
            content ''
            width 0
            height 0
            border-bottom .16rem solid #ffffff
            border-right .16rem solid transparent
            border-left .16rem solid transparent
            position absolute
            top -.14rem
            right .2rem
            z-index 2
        .li-div
            height 4.23rem
            overflow auto
        li
            list-style none
            height .7rem !important
            display flex
            align-items center
            padding-left .1rem
            border-bottom 0 !important
            justify-content center
            margin-bottom 0 !important
            &:hover
                color #F4A418
                font-weight bold
</style>

